<template>
  <view>
    <view
      class="search-nav"
      :style="{
        paddingTop: statusBarHeight + 'px',
      }"
    >
      <view
        class="nav-head"
        :style="{
          height: '80rpx',
        }"
      >
        <view class="back-icon" @click="goBack">
          <image :src="asyncImgs.images.left_arrow_icon" mode="" />
        </view>
        <view
          class="search-input flex-y-center"
          :style="{ borderRadius: '40rpx' }"
        >
          <view class="params-section" @click="handleParams">
            <view class="time-params">
              <view class="start-params">
                <view class="label-text">住</view>
                <view class="start-time">{{
                  timeParams.start.month + "-" + timeParams.start.day
                }}</view>
              </view>
              <view class="start-params">
                <view class="label-text">离</view>
                <view class="start-time">{{
                  timeParams.end.month + "-" + timeParams.end.day
                }}</view>
              </view>
            </view>
            <!-- <view class="address-params">{{ timeParams.city }}</view> -->
          </view>
          <input
            type="text"
            placeholder="请输入"
            v-model="searchVal"
            @confirm="gotoSearch"
            @clear="clearSearch"
            @change="searchChange"
            @focus="searchFocus"
            @blur="searchBlur"
            style="width: 100%"
          />
        </view>
      </view>
    </view>

    <!-- 占位,因为固定定位没有占用 -->
    <view
      :style="{
        paddingTop: statusBarHeight + 'px',
        paddingBottom: '80rpx',
      }"
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    searchValue: {
      type: String,
      default: "",
    },
    timeParams: {
      type: Object,
      default: {},
    },
  },
  watch: {
    searchValue(val) {
      this.searchVal = val;
    },
  },
  data() {
    return {
      menuButtonInfo: {},
      systemInfo: {},
      searchVal: "",
    };
  },
  created() {
    uni.getSystemInfo({
      success: (res) => {
        this.systemInfo = res;
      },
    });
  },
  computed: {},
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 点击确定搜索
    gotoSearch() {
      this.$emit("gotoSearch", {
        val: this.searchVal,
      });
    },
    // 清空搜素
    clearSearch() {
      this.$emit("clearSearch");
    },
    // 搜索内容变化监听
    searchChange(e) {
      this.$emit("searchChange", {
        val: this.searchVal,
      });
    },
    // 获取焦点时
    searchFocus(e) {
      this.$emit("searchFocus", {
        val: this.searchVal,
      });
    },
    // 失去焦点时触发
    searchBlur(e) {
      this.$emit("searchBlur", {
        val: this.searchVal,
      });
    },
    handleParams() {
      this.$emit("handleParams");
    },
  },
};
</script>

<style scoped lang="scss">
.search-nav {
  width: 100%;
  background-color: #ffffff;
  font-family: PingFang SC;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 201;

  .nav-head {
    display: flex;
    align-items: center;

    .back-icon {
      display: flex;
      align-items: center;
      padding-left: 16rpx;
      margin-right: 16rpx;

      image {
        width: 36rpx;
        height: 36rpx;
        display: block;
      }
    }

    .search-input {
      padding-left: 10rpx;
      overflow: hidden;
      background-color: #f2f2f2;
      height: 64rpx;
      margin-right: 30%;
      .params-section {
        display: flex;
        align-items: center;
        width: 175rpx;
        border-right: 1px solid #e0e0e0;
        height: 38rpx;
        padding-left: 20rpx;
        .time-params {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .start-params {
            display: flex;
            align-items: center;
            .label-text {
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              margin-right: 10rpx;
              line-height: 1;
            }
            .start-time {
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 600;
              color: #f0250e;
              line-height: 1;
            }
          }
          .start-params:nth-child(1) {
            margin-bottom: 8rpx;
          }
        }
        .address-params {
          margin-left: 15rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #f0250e;
          width: 74rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      input {
        width: 100%;
        height: 60rpx;
        background: #f2f2f2;
        font-size: 28rpx;
        font-weight: 400;
        padding: 0 20rpx;
        box-sizing: border-box;
      }
    }
  }
}

.search-nav::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
</style>
